<template>
  <view :class="'base-stepper ' + className" :style="'line-height: '+size+'rpx; border-radius: '+(borderRadius !== '' ? borderRadius : size/2)+'rpx; max-width: '+((((String(currentValue)).length) * (size/2+1)) + size*4)+'rpx'">
    <text class="icon icon-del" :style="'width: '+(size*1.2)+'rpx; font-size: '+(size/2+1)+'rpx;'" :class="{ disabled: value === min }" @click.stop.prevent="delInput"></text>
    <input
      :class="{ disabled: max === min }"
      :value="currentValue"
      class="input"
      :style="'height: '+size+'rpx;'"
      type="number"
      :disabled="max === min"
      :adjust-position="isAdjust"
      @input="handleInput"
      @blur="handleBlur"
      @focus="handleFocus"
    />
    <text class="icon icon-add" :style="'width: '+(size*1.2)+'rpx; font-size: '+(size/2+1)+'rpx;'" :class="{ disabled: value === max }" @click.stop.prevent="addInput"></text>
  </view>
</template>
<script>
function equal(value1, value2) {
  return String(value1) === String(value2)
}
function isDef(value) {
  return value !== undefined && value !== null
}
export default {
  name: 'BaseStepper',
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    min: {
      type: Number,
      default: 1
    },
    max: {
      type: Number,
      default: 999
    },
    step: {
      type: Number,
      default: 1
    },
    size: {
      type: Number,
      default: 54
    },
    isAdjust: {
      type: Boolean,
      default: true
    },
    borderRadius: {
      type: [Number, String],
      default: ''
    },
    className: {
      type: String,
      default: ''
    }
  },
  data() {
    const defaultValue = isDef(this.value) ? this.value : this.min
    const value = this.format(defaultValue)

    if (!equal(value, this.value)) {
      this.change(value)
    }
    return {
      integer: true,
      currentValue: value
    }
  },
  watch: {
    currentValue(value) {
      this.change(value)
    },
    value(value) {
      if (!equal(value, this.currentValue)) {
        this.currentValue = this.format(value)
      }
    }
  },
  methods: {
    handleInput({ detail }) {
      const value = detail.value
      if (value === '') {
        return
      }
      const formatted = this.filter(value)
      this.currentValue = formatted
    },
    delInput() {
      this.currentValue = this.format(this.currentValue - this.step)
      if (this.value === this.min) {
        this.$emit('disable', 'del')
      }
    },
    addInput() {
      this.currentValue = this.format(this.currentValue + this.step)
      if (this.value === this.max) {
        this.$emit('disable', 'add')
      }
    },
    handleBlur(e) {
      const value = this.format(e.detail.value)
      this.currentValue = value
      // if (!this.isAdjust) {
      //   this.$emit('inputBlur', e)
      // }
      this.$emit('inputBlur', e)
    },
    handleFocus(e) {
      if (!this.isAdjust) {
        this.$emit('inputFocus', e)
      }
    },
    change(value) {
      this.$emit('change', value)
    },
    // 取整数
    filter(value) {
      value = String(value).replace(/[^0-9.-]/g, '')
      if (value.indexOf('.') !== -1) {
        value = value.split('.')[0]
      }
      return value
    },
    // 取范围
    format(value) {
      value = this.filter(value)
      value = value === '' ? 0 : +value
      value = Math.max(Math.min(this.max, value), this.min)
      return value
    }
  }
}
</script>
<style lang="scss" scoped>
.base-stepper{
  max-width: 200rpx;
  // line-height: 54rpx;
  display: inline-flex;
  border: 1px solid #ddd;
  border-radius: 24rpx;
  overflow: hidden;
  background: #F6F6F6;
  .icon{
    // color: rgb(92, 77, 77);
    // font-size: 28rpx;
    // font-weight: bold;
    // text-align: center;
    position: relative;
    flex-shrink: 0;
    &.icon-del {
      border-right: 1px solid #ddd;
      &::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 16rpx;
        height: 3rpx;
        background-color: #000;
        box-shadow: 0 0 2rpx #000;
        transform: translate(-50%, -50%);
      }
    }
    &.icon-add {
      border-left: 1px solid #ddd;
      &::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 16rpx;
        height: 3rpx;
        background-color: #000;
        box-shadow: 0 0 2rpx #000;
        transform: translate(-50%, -50%);
      }
      &::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 3rpx;
        height: 16rpx;
        background-color: #000;
        box-shadow: 0 0 2rpx #000;
        transform: translate(-50%, -50%);
      }
    }
    &.disabled{
      // color: #ddd;
      &.icon-del {
        &::before {
          background-color: #ddd;
           box-shadow: 0 0 0 #000;
        }
      }
      &.icon-add {
        &::before, &::after {
          background-color: #ddd;
           box-shadow: 0 0 0 #000;
        }
      }
    }
  }

  .input{
    @include sub-item;
    // height: 54rpx;
    text-align: center;
    background-color: #fff;
    color: #000;
    &.disabled{
      color: #ddd;
    }
  }
}
</style>
